<template>
    <div class="stu-header">
        <h1>学生信息</h1>
         <div style="margin: 10px 0;">
        <el-button type="warning" @click="open">添加学生</el-button> 
        <el-input type="text"  placeholder="请输入姓名" style="width: 200px; margin-left: 10px;"></el-input>
        <el-button type="primary">搜索</el-button>
        </div>
    </div>
   
    <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="birthday" label="出生日期" />
        <el-table-column prop="img" label="头像" >
            <template #default="scope">
                <!-- <img :src="scope.row.img" alt="" style="width: 30px; height: 30px;"> -->
                <img :src="`/api/imgs/${scope.row.avatarUrl}`" :alt="scope.row.avatarUrl" style="width: 30px; height: 30px;">
            </template>
        </el-table-column> 
        <el-table-column label="操作" >
            <template #default="scope">
               <el-button type="primary" @click="open(scope.$index,scope.row)">编辑</el-button> 
               <el-button type="danger" @click ="handleDelete(scope.row,scope.$index)" >删除</el-button> 
            </template>
        </el-table-column>

    </el-table>
    <div style="height: 40px; margin-top: 10px; display: flex; justify-content:center; align-items: center;">
     <!-- 分页 -->
        <el-pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
      <el-dialog v-model="dialogFormVisible" :title="title=='add'?'添加会员':'编辑会员'" width="500">
          <el-form :model="addForm">
            <el-form-item label="姓名" prop="name"><el-input v-model="addForm.name" /></el-form-item>
            <el-form-item label="年龄" prop="age"><el-input-number v-model="addForm.age" :max="100" :min="1" /></el-form-item>
            <el-form-item label="性别" prop="gender">
                 <el-radio-group v-model="addForm.gender">
                    <el-radio value="男">男</el-radio>
                    <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                <el-date-picker 
                v-model="addForm.birthday" 
                type="date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                />
            </el-form-item>
        </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd" v-if="title=='add'">添加会员</el-button>
                <el-button type="primary" @click="handleEdit" v-else>编辑会员</el-button>
            </div>
            </template>
      </el-dialog>
</template>

<script setup>
import { ref,reactive,onMounted} from 'vue'
import { getStudentList,saveStudent,delStudent,modifyStudent } from '@/api/student'
import {ElMessageBox,ElMessage} from 'element-plus'

const tableData = ref([])
const getData = ()=>{
    getStudentList({pageSize:page.pageSize,currentPage:page.currentPage}).then(res=>{
        console.log('请求响应的数据:',res);
        let data = res.data.data
        // 数据分页  起始数据  截数据
        // 假设 18条数 每页显示5条
        // 第一页 0     5    
        // 第二页 5     10
        // 第三页 10     15
        // 第四页 15  
        let start =  (page.currentPage-1)*page.pageSize
        let end = page.currentPage*page.pageSize
        tableData.value = data.slice(start,end) //截取每页显示的数据
        page.pageTotal = data.length
        // tableData.value = data

    })
}
onMounted(()=>{
    getData()
})


/*json 数据文件 模拟数据
   作业 ：
   1.
    产品列表页面 完成增删改查的操作 
    {id 名称，价格，生产日期，描述，图片,销量}
    2.完成一个登录页面 用户名 密码  验证码
     点击登录 跳转到home主页  home  首页 商品列表页面 可以通过路由进行跳转
*/

// 控制对话框的显示与隐藏
const  dialogFormVisible = ref(false)
const addForm = reactive({
    id:null,
    name:'',
    age:0,
    gender:'男',
    birthday:null
})
const title =ref('add')
//添加会员信息
const handleAdd  = async()=>{
    console.log(addForm);
    //调用后端接口 添加到数据库中 这里模拟添加到数组中
   await saveStudent(addForm).then(res=>{
        console.log("保存用户信息===》",res);
        if(res.code==200){//添加成功的话刷新列表数据
           
        }
    })
     getData()
    // tableData.value.push({...addForm,id:tableData.value.length+1})
    dialogFormVisible.value = false
}
const open=(index,row)=>{
    console.log(index,row);
    if(row){//编辑的操作
        title.value = 'edit'
        //数据的回显
        addForm.id = row.id
        addForm.name = row.name
        addForm.age = row.age
        addForm.sex = row.sex
    }else{//新增的操作
        title.value = 'add'
        //情况表单数据
        addForm.id = null
        addForm.name = ''
        addForm.age = 0
        addForm.sex = '男'
   }
   dialogFormVisible.value = true

}
// 点击编辑按钮
const  handleEdit = ()=>{
   console.log(addForm);
   //调用后端接口 修改数据库中的数据 这里模拟添加到数组中
   // 找到要修改元素的索引
//    const index = tableData.value.findIndex(item=>item.id==addForm.id)
//    tableData.value[index] = {...addForm}
   modifyStudent(addForm).then(res=>{
        console.log("修改用户信息===》",res);
    })
    getData()
   dialogFormVisible.value = false
}
// 点击删除按钮
const  handleDelete = (row,index)=>{
    console.log(row,index);
    ElMessageBox.confirm('你确定要删除吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
    }).then(async ()=>{
        // tableData.value.splice(index,1)
        // 调用后端接口 删除数据库中的数据
       await delStudent(row.id).then(res=>{
        console.log("删除用户信息====",res);
        })
         getData()
    })

   

}

//分页插件
const  page = reactive({
    currentPage:1,
    pageSize:5,
    pageTotal:7
})
//每页显示多少条数据发生改变时触发
const handleSizeChange = (val)=>{
    console.log('每页显示多少发生改变',val);
    page.pageSize = val
    getData()
}
//当前页码发生改变时触发
const handleCurrentChange = (val)=>{
    console.log('页码发生改变:',val);
    page.currentPage = val
    getData()
}

</script >
<style  scoped>
.stu-header{
    margin-bottom: 10px;
}
</style>